<!--  -->
<template>
  <div>
    <el-button type="primary" plain @click="dialogTableVisible = true">添加水果</el-button>
    <!-- 多条件查询 -->

    <el-form :model="s" label-width="40px" style="margin-top:55px; display:flex;">

      <el-form-item label="价格:" :label-width="formLabelWidth" lastyle="width:300px;">
        <el-input v-model="s.fprice" placeholder="请输入最低价格"></el-input>
      </el-form-item>
      <el-form-item label="类型" :label-width="formLabelWidth">
        <el-select v-model="s.ftype" placeholder="请选择状态">
          <el-option label="全部" value="全部"></el-option>
          <el-option label="瓜果类" value="瓜果类"></el-option>
          <el-option label="浆果类" value="浆果类"></el-option>
          <el-option label="坚果类" value="坚果类"></el-option>
          <el-option label="柑橘类" value="柑橘类"></el-option>
          <el-option label="核果类" value="核果类"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="test(s)">查询</el-button>
      </el-form-item>
    </el-form>


    <el-dialog :visible.sync="dialogTableVisible" title="添加水果">
      <el-form :model="fruits">
        <el-form-item label="水果名称" :label-width="formLabelWidth">
          <el-input v-model="fruits.fname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="水果类型" :label-width="formLabelWidth">
          <el-input v-model="fruits.ftype" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="水果数量" :label-width="formLabelWidth">
          <el-input v-model="fruits.fnumber" autocomplete="off"></el-input>
        </el-form-item> -->
       <el-form-item label="水果图片" :label-width="formLabelWidth">
          <el-input v-model="fruits.furl" autocomplete="off">
          </el-input>
        </el-form-item>
        <el-form-item label="水果详情" :label-width="formLabelWidth">
          <el-input v-model="fruits.fdetail" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="水果价格" :label-width="formLabelWidth">
          <el-input v-model="fruits.fprice" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="水果库存" :label-width="formLabelWidth">
          <el-input v-model="fruits.fstock" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="水果销售量" :label-width="formLabelWidth">
          <el-input v-model="fruits.fsale" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="addfruits()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog :visible.sync="dialogFormVisible4Edit" title="修改水果">
      <el-form :model="fruitsed">
        <el-form-item label="水果名称" :label-width="formLabelWidth">
          <el-input v-model="fruitsed.fname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="水果类型" :label-width="formLabelWidth">
          <el-input v-model="fruitsed.ftype" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="水果数量" :label-width="formLabelWidth">
          <el-input v-model="fruitsed.fnumber" autocomplete="off"></el-input>
        </el-form-item> -->
       <el-form-item label="水果图片" :label-width="formLabelWidth">
          <el-input v-model="fruitsed.furl" autocomplete="off">
          </el-input>
        </el-form-item>
        <el-form-item label="水果详情" :label-width="formLabelWidth">
          <el-input v-model="fruitsed.fdetail" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="水果价格" :label-width="formLabelWidth">
          <el-input v-model="fruitsed.fprice" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="水果库存" :label-width="formLabelWidth">
          <el-input v-model="fruitsed.fstock" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="水果销售量" :label-width="formLabelWidth">
          <el-input v-model="fruitsed.fsale" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="modifyfruits()">确 定</el-button>
      </div>
    </el-dialog>

    <el-table :data="Fruits.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
     <el-table-column prop="fid" label="水果ID" width="80">
      </el-table-column>
      <el-table-column prop="fname" label="水果名称" width="80">
      </el-table-column>
      <el-table-column prop="ftype" label="水果分类" width="90">
      </el-table-column>
      <!-- <el-table-column prop="fnumber" label="水果数量" width="90">
      </el-table-column> -->
     <el-table-column prop="furl" label="图片" width="120">
        <template slot-scope="scope">
          <el-image :src="scope.row.furl"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="fdetail" label="水果详情" width="280">
      </el-table-column>
      <el-table-column prop="fprice" label="水果价格" width="80">
      </el-table-column>
      <el-table-column prop="fstock" label="水果库存" width="90">
      </el-table-column>
      <el-table-column prop="fsale" label="水果销售量" width="90">
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template v-slot="scope">
          <el-button type="primary" @click="updatefruits(scope.row)">修改</el-button>
          <el-button type="danger" @click="deletefruits(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
      <!--分页区域-->
  <el-pagination
      @size-change="size_change" 
      @current-change="current_change"  
      :current-page="currentPage"  
      :page-sizes="[2,3,5]"  
      :page-size="pagesize"  
      layout="total, sizes, prev, pager, next, jumper"  
      :total="Fruits.length"> 
  </el-pagination>
  </div>


</template>
<script >
const axios = require("axios");
axios.defaults.baseURL = '/api/'
export default {
  data() {
    return {
      Fruits: [],
      //添加用户
      dialogTableVisible: false,
      //修改用户
      dialogFormVisible4Edit:false,
      fruits: {
        fname: '',
        ftype: '',
        fnumber: '',
        furl: '',
        fdetail: '',
        fprice: '',
        fstock: '',
        fsale:''
      },
      fruitsed: {
        fname: '',
        ftype: '',
        fnumber: '',
        furl: '',
        fdetail: '',
        fprice: '',
        fstock: '',
        fsale:''
      },
      s:{
        ftype:'全部',
        fprice:''
      },
      formLabelWidth: '120px',
       total:0,//总条目数
        pagesize:10,//每页显示条目个数
        currentPage:1,//当前页数
    }
  },
  props: [],
  components: {},
  created() {
    this.findAll();
    this.size_change(5);
  },
  mounted() {
  },
  methods: {
    // 多条件查询
    test(ser){
     
      if(ser.fprice==''){

        ser.fprice=0;
      

      }
       axios({
          method: 'get',
          url: '/fruit/conditionSelect',
          params:{
            ftype:ser.ftype,
            fprice:ser.fprice
          }
        }).then((res)=>{
          this.Fruits = res.data
           console.log(res.data);
        })
    },
    findAll() {
      axios.get('/fruit/getFruitList').then(res => {
        this.Fruits = res.data;
        console.log(res.data);
      })
    },
     size_change(newSize){
       this.pagesize = newSize
   },
   //监听 页码值 改变的事件
   current_change(newPage){
       this.currentPage = newPage
   },
    cancel: function () {
      this.$message.info("当前操作已取消")
      this.dialogTableVisible = false,
      this.dialogFormVisible4Edit=false
    },
    addfruits: function () {
      axios({
        method: 'POST',
        url: '/fruit/addFruit',
        data: this.fruits
      })
        .then((resp) => {
          this.dialogTableVisible = false;
          this.$message.success("添加成功");
          this.findAll();
        })
    },
    updatefruits: function(fruits){
      this.fruitsed=fruits;
      this.dialogFormVisible4Edit=true
    },
    modifyfruits: function(){
      axios({
        method:'PUT',
        url:'/fruit/updateFruit',
        data: this.fruitsed
      }).then(res=>{
        this.dialogFormVisible4Edit=false,
        this.$message.success("修改成功");
        this.findAll();
      })
    },
    deletefruits: function (fruits) {
      console.log(fruits.fid);
      axios({
        method: 'delete',
        url: '/fruit/deleteFruit/' + fruits.fid,
      })
        .then((res) => {
          this.$message.success('删除成功');
          this.findAll();
        })
    }



  }
};
</script>
<style lang='scss'>
</style>